<template>
  <div class="order-content-details app-container">
    <div>
      <div class="row row-top">
        <div class="col-1 _padding">
          <div>订单编号：202206221524456890</div>
          <div class="col-1-btn">
            <el-image style="width: 100px; height: 100px"
              src="https://img13.360buyimg.com/seckillcms/s250x250_jfs/t1/27510/30/17238/111828/62a449f1Eb0c679a6/1cee2abb190eea27.jpg"
              fit="cover"></el-image>
            <div class="col-1-content">
              <div class="col-1-text">交易完成</div>
              <el-button type="primary" size="mini">查看评价</el-button>
            </div>
          </div>
        </div>
        <div class="col-2 _padding">
          <div>订单状态:</div>
          <div style="margin-top: 20px;">
            <el-steps :active="2">
              <el-step title="提交订单" description="2022-04-20 09:30:27" icon="iconfont icon-tijiaodingdan"></el-step>
              <el-step title="付款成功" icon="iconfont icon-fukuanchenggong"></el-step>
              <el-step title="商品出库" icon="iconfont icon-daichuku"></el-step>
              <el-step title="等待收货" icon="iconfont icon-daishouhuo"></el-step>
              <el-step title="完成" icon="iconfont icon-dingdanwancheng_icon"></el-step>
            </el-steps>
          </div>
        </div>
      </div>

      <div class="row row-top row2">
        <div class="col-1 _padding">
          <div class="info-item">
            <div class="info-item-label">收货人信息：</div>
            <div class="info-item-content">
              解景青
            </div>
          </div>

          <div class="info-item">
            <div class="info-item-label">收货人：</div>
            <div class="info-item-content">
              河北沧州市运河区城区新华西路与宏宇中街交叉口东北约160米宏宇城B区6-2-1402
            </div>
          </div>

          <div class="info-item">
            <div class="info-item-label">收货地址：</div>
            <div class="info-item-content">

            </div>
          </div>

          <div class="info-item">
            <div class="info-item-label">手机号：</div>
            <div class="info-item-content">
              18733842561
            </div>
          </div>
        </div>
        <div class="col-2">
          <div class="col-2-item _padding">
            <div class="info-item">
              <div class="info-item-label">收货人信息：</div>
              <div class="info-item-content">
                解景青
              </div>
            </div>

            <div class="info-item" style="border-bottom: 1px solid #f2f2f2;padding-bottom: 10px;">
              <div class="info-item-label">收货人：</div>
              <div class="info-item-content">
                河北沧州市运河区城区新华西路与宏宇中街交叉口东北约160米宏宇城B区6-2-1402
              </div>
            </div>

            <div class="info-item">
              <div class="info-item-label">核销信息：</div>
              <div class="info-item-content">

              </div>
            </div>

            <div class="info-item">
              <div class="info-item-label">核销时间：</div>
              <div class="info-item-content">
                2022-06-22 12:12:12
              </div>
            </div>
          </div>
          <div class="col-2-item _padding">
            <div class="info-item">
              <div class="info-item-label">收货人信息：</div>
              <div class="info-item-content">
                解景青
              </div>
            </div>

            <div class="info-item">
              <div class="info-item-label">收货人：</div>
              <div class="info-item-content">
                河北沧州市运河区城区新华西路与宏宇中街交叉口东北约160米宏宇城B区6-2-1402
              </div>
            </div>

            <div class="info-item">
              <div class="info-item-label">收货地址：</div>
              <div class="info-item-content">

              </div>
            </div>

            <div class="info-item">
              <div class="info-item-label">手机号：</div>
              <div class="info-item-content">
                18733842561
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row-top row3">
        <div class="col-1" v-for="i in 5" :key="i">
          <el-image style="width: 100px; height: 100px; margin-right: 10px;"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
          <div>
            <div class="col-1-title">蒙牛 特仑苏 纯牛奶250ml*16每100ml含3.6g优质蛋白质 礼盒装</div>
            <div>数量：2</div>
          </div>
        </div>

        <div class="col-1" style="height: 0;"></div>
        <div class="col-1" style="height: 0;"></div>
        <div class="col-1" style="height: 0;"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'OrderContentDetails',
    data() {
      return {}
    },
    methods: {},
  }
</script>
<style lang="scss" scoped>
  ::v-deep .is-finish {
    color: #00cf55 !important;
    border-color: #00cf55 !important;
  }

  .row3 {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    .col-1 {
      display: flex;
      align-items: center;
      height: 140px;
      margin-left: 10px;

      .col-1-title {
        width: 175px;
        height: 80px;
        margin-bottom: 8px;

        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 4; //行数
        -webkit-box-orient: vertical
      }
    }
  }

  .order-content-details {
    ._padding {
      padding: 15px 10px;
      box-sizing: border-box;
    }

    .row-top {
      border: 2px solid #f2f2f2;
      width: 1200px;

      &+.row-top {
        margin-top: 20px;
      }
    }

    .row {
      display: flex;

      .col-1 {
        border-right: 2px solid #f2f2f2;
        width: 240px;
        .col-1-content {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .col-1-text {
            color: rgb(0, 207, 85);
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: bold;
          }
        }

        .col-1-btn {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          margin-top: 20px;
        }
      }

      .col-2 {
        flex: 1;
      }
    }
  }

  .row2 {
    .col-2 {
      display: flex;

      .col-2-item {
        flex: 1;

        &+.col-2-item {
          border-left: 2px solid #f2f2f2;
        }
      }
    }
  }

  .info-item {
    display: flex;
    font-size: 14px;

    .info-item-label {
      width: 90px;
      text-align: right;
    }

    .info-item-content {
      flex: 1;
    }

    &+.info-item {
      margin-top: 10px;
    }
  }
</style>
